<template>
    <div class="main">
        <DataGrid :columns="columns" ref="grid" :action="action"><template slot="easySearch"><Form ref="formInline" :model="easySearch"  inline><FormItem prop="keys"><Input  placeholder="请输入关键字"  v-model="easySearch.keys.value" /> </FormItem>
<FormItem><Button type="primary" @click="search">查询</Button></FormItem>
</Form></template>
            <template slot="searchForm">
                <Search />
            </template>
            <template slot="buttons">
                <Button type="primary" @click="add">新增</Button>
            </template>
        </DataGrid>
        <Modal v-model="modal" :title="title" width="1200" footer-hide>
            <component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" />
        </Modal>       
    </div>
</template>
<script>
import Api from './api'
import Search from './search'
export default {
  name: 'list',
  components:{
    Search
        },
        head: {
            title: "",
            author: "henq",
            description: "DBLink  5/4/2020 11:38:55 AM",
},
  data() {
      return {
          action: Api.index,
          easySearch: {
keys:{op:"name",value:null}
},
          modal: false,
          title:"新增",
          detail:null,
          curId: "",
      columns: [
          
         {
          type: "selection",
          width: 60,
          align: "center"
        },
    { key:"id",title:this.l("id")  ,hide:true ,align:"left"    ,high:true  },
    { key:"name",title:this.l("name")   ,align:"left"   ,easy:true ,high:true  },
    { key:"link",title:this.l("link")   ,align:"left"    ,high:true  },
    { key:"dbType",title:this.l("dbType")   ,align:"left"    ,high:true  },
    { key:"creationTime",title:this.l("creationTime")   ,align:"left"    ,high:true  },
    { key:"creatorUserId",title:this.l("creatorUserId")   ,align:"left"    ,high:true  },
    // { key:"lastModificationTime",title:this.l("lastModificationTime")   ,align:"left"    ,high:true  },
    // { key:"lastModifierUserId",title:this.l("lastModifierUserId")   ,align:"left"    ,high:true  },
    // { key:"deletionTime",title:this.l("deletionTime")   ,align:"left"      },
    // { key:"deleterUserId",title:this.l("deleterUserId")   ,align:"left"      },
    { key:"isDeleted",title:this.l("isDeleted")   ,align:"left"  ,hide:true    },
          {
              title: '操作',
              key: 'action',
              width: 140,
              align: 'center',
              render: (h, params) => {
                  return h('div', { class: "action" }, [
                      h('op', { attrs: { oprate: 'detail' }, on: { click: () => this.view(params.row.id) } }, '查看'),
                      //h('op', { attrs: { oprate: 'copy' }, on: { click: () => this.copy(params.row.id) } }, '克隆'),
                      h('op', { attrs: { oprate: 'edit'}, on: { click: () => this.edit(params.row.id) } }, '编辑'),
                      h('op', { attrs: { oprate: 'delete' }, on: { click: () => this.remove(params.row.id) } }, '删除')
                  ])
              }
          },
      ]
    }
  },
  mounted(){
    console.log(this);
  },
        async fetch({ store, params }) {
            await store.dispatch('loadDictionary') // 加载数据字典
        },
  methods:{
      ok() {
          this.$refs.grid.load()
          this.modal = false
          this.curId = "";
      },
      search() {
          this.$refs.grid.reload(this.easySearch)
      },
      add() {
          this.curId = "";
          this.title = "新增";
          this.detail =()=> import('./add')
          this.modal = true;
      },
      copy(id) {
          this.curId = id;
          this.title = "克隆";
          this.detail = () =>import('./add')
          this.modal = true;
      },
      view(id) {
          this.curId = id;
          this.title = "详情";
          this.detail = () =>import('./detail')
          this.modal = true;
      },
      edit(id) {
          this.curId = id;
          this.title = "编辑";
          this.detail = () => import('./edit')
          this.modal = true;
      },
      remove(id) {
          Api.delete(id).then((r) => {
              if (r.success) {
                  this.$refs.grid.load();
                  this.$Message.success('删除成功')
              }
          })
      },
      cancel() {
          this.curId = 0;
          this.modal = false
      },
      l(key) {
         let vkey = "DBLink" + "." + key;
          if(vkey==this.$t(vkey)){
               return this.$t(key)
          }else{
              return this.$t(vkey)
          }
      }
  }
}
</script>
<style lang="less">
 .main{
     background: white;
 }
</style>